<template>
  <div class="waterpolo">
    <canvas id="canvas" width="640" height="640"></canvas>
  </div>
</template>

<script>
  export default {
    props: {
      colors: {
        type: Array,
        default: function () { return ['#3faef9', '#0069df', '#ff6c00'] }
      },
      amounts: {
        type: Array,
        default: function () { return [10000, 5000, 3000] }
      },
      totalMoney: {
        type: String,
        default: '0.00'
      }
    },
    data () {
      return {
        animation: null,
        sortRenderArray: []
      }
    },
    created () {
      const renderArray = []
      let totalMoney = 0
      this.amounts.forEach((amount) => { totalMoney += amount })

      this.amounts.forEach((item, i) => {
        let ratio = 0
        if (item === 0) {
          ratio = 0.25
        } else {
          ratio = (item / totalMoney) + 0.3
        }
        renderArray.push({
          amount: item,
          color: this.colors[i],
          height: 640 - (350 * ratio),
          sp: (1 / ratio)
        })
      })
      this.sortRenderArray = renderArray.sort((a, b) => b['amount'] - a['amount']) // 排序
    },
    mounted () {
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')

      // 初始化函数表
      const M = Math
      const Sin = M.sin
      const PI = M.PI

      // 设置画布的宽度
      const cW = canvas.width = 640
      const cH = canvas.height = 640

      // 曲线起点的坐标
      // const sx = 0
      // const sy = 300 // 也是波浪的总高度 640 ~ 0

      const axisLength = 640 // sin图形的长度
      const xoffset = 0      // x 偏移量
      const unit = 50        // 波浪高度

      ctx.beginPath()
      ctx.arc(320, 320, 260, 0, PI * 2)
      ctx.strokeStyle = '#e5e5e5'
      ctx.lineWidth = 5
      ctx.stroke()
      ctx.beginPath()
      ctx.arc(320, 320, 240, 0, PI * 2)
      ctx.clip()

      // canvas阴影的状态
      ctx.shadowOffsetX = 0
      ctx.shadowOffsetY = 0
      ctx.shadowBlur = 40
      ctx.shadowColor = 'rgba(0, 0, 0, 0.4)'

      // 文字
      const drawText = (text, x, y, fontSize) => {
        ctx.shadowBlur = 0
        ctx.beginPath()
        ctx.font = `${fontSize}px HiraginoSansGB-w3`
        ctx.textAlign = 'center'
        ctx.fillStyle = '#666'
        ctx.fillText(text, x, y)
      }
      // ctx.globalCompositeOperation = 'xor'
      const drawSine = (sp, sy, color) => {
        const points = []
        let x = sp
        let y = -Sin(x)
        ctx.beginPath()
        ctx.fillStyle = color
        ctx.moveTo(xoffset, sy)
        ctx.lineWidth = 1
        ctx.strokeStyle = color
        for (let i = xoffset; i < xoffset + axisLength; i += 10) {
          x = (xoffset + i) / unit + sp
          y = -Sin(x) * 0.5

          points.push([i, unit * y + sy])
          ctx.lineTo(i, unit * y + sy)
        }
        const startPoint = points.shift()
        const endPoint = points.pop()

        ctx.lineTo(endPoint[0], cH)
        ctx.lineTo(0, cH)
        ctx.lineTo(startPoint[0], startPoint[1])
        ctx.fill()
        ctx.stroke()
      }
      const that = this
      let heights = [640, 640, 640] // 控制刚开始上升的动画

      // 渲染函数
      function render () {
        ctx.clearRect(0, 0, cW, cH)
        // 控制
        heights[0] -= 3
        heights[1] -= 2
        heights[2] -= 2

        that.sortRenderArray.forEach((obj, i) => {
          if (heights[i] >= obj.height) {
            drawSine(obj.sp += (i + 2) / 60, heights[i], obj.color)
          } else {
            drawSine(obj.sp += (i + 2) / 60, obj.height, obj.color)
          }
        })

        ctx.save()
        ctx.globalCompositeOperation = 'xor'
        drawText(that.totalMoney, 330, 300, 66)
        drawText('总资产(元)', 320, 400, 56)
        ctx.restore()

        that.animation = window.requestAnimationFrame(render)
      }
      setTimeout(() => {
        render()
      }, 0)
    },
    destroyed () {
      window.cancelAnimationFrame(this.animation)
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';

  .waterpolo {
    #canvas {
      width: 320px;
      height: 320px;
      background: #fff;
    }
  }
</style>
